import { Component } from 'react';
import axios from "axios"
import './App.less';
// import "../public/iconfont.css";

import { Tabs, Checkbox, Pagination, ConfigProvider, Carousel, Image } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';

import Hello from './components/Hello';
// import IconFont from "../public/IconFont.css"

const { TabPane } = Tabs;

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      tabKey: 1,
      tabs: [
        { title: "普通讲师", key: 1 },
        { title: "高级讲师", key: 2 },
        { title: "特聘讲师", key: 3 },
        { title: "超级讲师", key: 4 },
      ],
      LabelKey: 1,
      Label: [
        { name: "擅长方向", key: 1, done:true },
        { name: "新手", key: 2, done:false },
        { name: "店长", key: 3, done:false },
        { name: "内容运营", key: 4, done:false },
        { name: "搜索", key: 5, done:false },
        { name: "服装服饰", key: 6, done:false },
        { name: "进阶", key: 7, done:false },
        { name: "汽车五金电子", key: 8, done:false },
        { name: "基础", key: 9, done:false },
        { name: "商品运营", key: 10, done:false },
        { name: "箱包鞋帽", key: 11, done:false },
        { name: "淘宝客", key: 12, done:false },
        { name: "店铺运营", key: 13, done:false },
      ],
      data: [],  //  接口请求 回来的 参数
      img: [],   //  请求出来的 图片 数据，全部放到 img 里面
      moreChoose: false,  // 多选 的 切换的 
      moreSize: [
        { name: "XXS", key: 1, state: false },
        { name: "XS", key: 2, state: false },
        { name: "S", key: 3, state: false },
        { name: "M", key: 4, state: false },
        { name: "均码", key: 5, state: false },
        { name: "L", key: 6, state: false },
        { name: "XL", key: 7, state: false },
        { name: "2XL", key: 8, state: false },
        { name: "XXXL", key: 9, state: false },
        { name: "XXXXL", key: 10, state: false },
        { name: "XXXXXL", key: 11, state: false },
      ],
      contentStyle: {  //  轮播图 样式
        height: '160px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: '#364d79',
      },
      timer: null,
      flag: true,
      search: null,   // input 框 输入的值 
      pageNo: 1,   //  存储 分页器的  页数

    }
  }
  callback = (tabKey) => {   // 切换选项卡
    // console.log(tabKey, typeof tabKey);
    const { search, Label } = this.state
    axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?status=${tabKey}&username=${search}`).then(res => {
      // console.log("tab切换：", res.data.data)
      this.setState({
        tabKey,
        data: res.data.data,
        pageNo: res.data.data.pageNo,
        Label: Label.map(m => ({...m, done: false}))
      })
    }).catch(err => {console.log("err:", err)})
    
  }

  handleChoose = (item) => {  //  输入框 下面的 tab 选中项
    const { Label, search, tabKey } = this.state
    // console.log("item", item );
    let newLabel = Label.map(m => ({...m, done: m.key === item.key ? true : false}))
    // console.log("00", newLabel)
    this.setState({
      Label: newLabel
    })

    let names = []
    names.push(item.name)
    axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?tags=${JSON.stringify(names)}&status=${search}&username=${tabKey}`).then(res => {
      console.log("tag:", res)
      this.setState({
        data: res.data.data,
        img: res.data.data.List.map(m => m.img),
        pageNo: Number(res.data.data.pageNo),
      })
    }).catch(err => {console.log("tag:", err)})
  }
  handleMoreChoose = () => {   //  多选  控制 现实 和 隐藏的 

    this.setState({
      moreChoose: !this.state.moreChoose
    })
  }

  handleSubMoreChoose = () => {   // 提交多选
    const {Label} = this.state
    // let a = Label.filter(f => f.done == true)
    let arr = []
    Label.forEach(i => {
      if(i.done == true) {  
        arr.push(i.name)
      }
    })
    console.log("arr:", arr,  )
    axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?tags=${JSON.stringify(arr)}`).then(res => {
      // console.log("tag:", res)
      this.setState({
        data: res.data.data,
        img: res.data.data.List.map(m => m.img),
        pageNo: Number(res.data.data.pageNo),
        moreChoose: !this.state.moreChoose
      })
    }).catch(err => {console.log("tag:", err)})

    // this.setState({
    //   moreChoose: !this.state.moreChoose
    // })
  }

  handleCanelMoreChoose = () => {  //  取消多选
    const {Label} = this.state

    this.setState({
      moreChoose: !this.state.moreChoose,
      Label: Label.map(m => ({...m, done: false}))
    })
  }
 

  onChange = (e,index) => {
    const {Label} = this.state
    // console.log(index, "每一项", e.target.checked)
    console.log("---", Label[index].done = e.target.checked)
    let newLabel = JSON.parse(JSON.stringify(Label))
    newLabel[index].done = e.target.checked
    this.setState({
      Label: newLabel
    })

  }

  paginationOnChange = (pageNumber) => {  // 分页
    // console.log("分页：", pageNumber)
    const {tabKey, search} = this.state
    axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?pageNo=${pageNumber}&status=${tabKey}&username=${search}`).then(res => {
      // console.log("分页 返回 res:", res.data.data)
      console.log("pageNo:", res.data.data.pageNo, typeof res.data.data.pageNo, Number(res.data.data.pageNo))
      this.setState({
        data: res.data.data,
        img: res.data.data.List.map(m => m.img),
        pageNo: Number(res.data.data.pageNo)
      })
    }).catch(err => { console.log("分页 返回 err:", err) })
  }

  itemRender = (current, type, originalElement) => {  //  分页修改 上一页 和 下一页
    const {data} = this.state
    if (type === 'prev') {
      return <a className='pagination_prev'>&lt;&lt; 上一页 </a>;
    }
    if (type === 'next') {
      return <div><a className='pagination_prev'> 下一页 &gt;&gt; </a>  
              <span style={{ color: "#959595" }} className="span_next">共{data.totalRecord}页，到第</span> 
             </div>;
    }
    return originalElement;
  }

  // carouselOnChange = (a, b, c) => {  //  轮播图
  // }

  prev = () => {  // 上一张图片
    this.slider.next();
  }
  next = () => {  //  下一张图片
    this.slider.prev();
  }

  keyUpInput = (e) => {  //  input 框
    // console.log(e.target.value, e.keyCode, e)
    this.setState({
      search: e.target.value
    })
    const { timer, flag, tabKey } = this.state
    if (e.keyCode == 13) {
      // console.log(e.target.value)
      axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?username=${e.target.value}&status=${tabKey}`).then(res => {
        console.log("input 搜索：", res.data.data)
        this.setState({
          data: res.data.data,
          img: res.data.data.List.map(m => m.img),
          pageNo: res.data.data.pageNo
        })
      }).catch(err => { console.log("搜索 err: ", err) })
    }

    // const foo = () => {
    //   if (flag) {
    //     this.setState({
    //       flag: false
    //     })
    //     timer && clearTimeout(timer)
    //     timer = setTimeout(() => {
    //       axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?username=${e.target.value}&status=3`).then(res => {
    //       console.log("input 搜索：", res.data.data)
    //       this.setState({
    //         data: res.data.data,
    //         img: res.data.data.List.map(m => m.img)
    //       }) 
    //       this.setState({
    //         flag: true
    //       })
    //     }).catch(err => { console.log("搜索 err: ", err) })
    //       }, 2000)} 
    // }
    // foo()
  }

  searchInput = () => {  // 搜索 数据
    const { search, tabKey } = this.state
    if(search !== null) {
      axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?username=${search}&status=${tabKey}`).then(res => {
        this.setState({
          data: res.data.data,
          img: res.data.data.List.map(m => m.img)
        })
      }).catch(err => {console.log("搜索 err: ", err)})
    }
  }

  

  componentDidMount() {  // 初始化 
    const { search, pageNo, tabKey } = this.state
    axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?status=${tabKey}&pageNo=${pageNo}`).then(res => {
      // console.log("res:", res.data.data)
      // console.log(res.data.data.List)
      this.setState({
        data: res.data.data,
        img: res.data.data.List.map(m => m.img),
        pageNo: Number(res.data.data.pageNo)
      })
    }).catch(err => {
      console.log("err:", err)
    })
    let name = '["擅长方向"]'
    axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?tags=${name}&status=${tabKey}`).then(res => {
      // console.log("tag:", res)
      this.setState({
        data: res.data.data,
        img: res.data.data.List.map(m => m.img),
        pageNo: Number(res.data.data.pageNo)
      })
    }).catch(err => {console.log("tag:", err)})
  }

  render() {
    const { tabs, tabKey, Label, LabelKey, data, moreChoose, moreSize, contentStyle, img, pageNo } = this.state
    return (
      <div className='app'>
        {/* ======================== */}
        <div className='content_in'>


           {/* 头部 */}
        <div className='first_content'>
          <div className='first_height'>
            <div className='first_title'>讲师简介</div>
            <div className='first_title_1'>COMPANY PROFILE</div>
            <div className='first_introduce'>         菲菲十分士大夫是否是否士大夫大师傅，为商家、企业、品牌等不同阶段的电商、十分士大夫撒旦发射点发士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫手动阀手动阀士大夫士大夫士大夫手动阀手动阀手动阀手动阀手动阀手动阀士大夫士大夫是的发生的士大夫士大夫士大夫士大夫但是是的士大夫士大夫但是手动阀手动阀士大夫士大夫士大夫手动阀手动阀手动阀手动阀</div>
          </div>
        </div>

        {/* tab 切换 */}
        <div className='second_tab'>
          <div className='tab_head'>
            {
              tabs.map(m => <div className={tabKey === m.key ? 'tab_active' : ""} onClick={() => { this.callback(m.key) }} key={m.key}> {m.title} </div>)
            }
          </div>
        </div>

        {/* content */}

        {/* <div className="bac" className={tabKey !== 3 ? "none" : ""}> */}
          <div className='third_title'>
            <div>特聘讲师</div>
            <div>CERTIFIED LECTURER</div>
          </div>

          {/* input 输入框 */}
          <div className='fourth_input'>
            <div className='input_content'>
              <div className='input_left'>
                <div>全部 &gt; </div>
                <div className='input_enter'>
                  <input type="input" onKeyUp={this.keyUpInput} /> 
                  <div onClick={this.searchInput}> 
                    <i className='iconfont icon-search'></i> 
                  </div>
                </div>
              </div>

              <div>共 <span className='span'>200</span> 讲师同步在线 </div>

            </div>
          </div>

          {/* 输入框 下面的 tab */}
          {
            !moreChoose && (<div className='middle_content'>
              <div className='content_item'>
                <div className='middle_left'>
                  {
                    Label.map(m => {
                      return (
                        <div onClick={() => { this.handleChoose(m) }}
                            key={m.key}
                            className={m.done == true ? "label_active label" : "label"}>
                              {m.name}
                        </div>
                      )
                    } )
                  }
                </div>
                <div className='middle_right'>
                  <div className='more_choice' onClick={() => this.handleMoreChoose()}>+多选</div>

                  <div className='label_more' >更多 <i className='iconfont icon-xiangxia'></i> </div>
                </div>
              </div>
            </div>)
          }

          {
            moreChoose && (<div className='morechoose_content'>
              <div className='isshow_morechoose'>
                <div className='morechoose_left'>
                  <div className='morechoose_allitem'>
                    {
                      Label.map((m, index) => {
                        return (
                          <div key={m.key} className="morechoose_div">
                            <Checkbox className='more_checkbox' checked={m.done} onChange={(e) => {this.onChange(e, index)}}>{m.name}</Checkbox>
                          </div>
                        )
                      })
                    }

                    
                  </div>
                  <div className='morechoose_right'>
                      <div onClick={() => this.handleMoreChoose()}>多选</div>
                      <div>更多 <i className='iconfont icon-xiangxia'></i> </div>
                  </div>
                 
                </div>
                <div className='morechoose_middle_bottom'>
                      <div className='morechoose_middle_bottom_submit' onClick={this.handleSubMoreChoose} >提交</div>
                      <div className='morechoose_middle_bottom_cancel' onClick={this.handleCanelMoreChoose}>取消</div>
                </div>
              
              </div>
            </div>)
          }
          {/* 内容项 */}

          <div className='news_content'>
            <div className='news'>

              {
                data?.List?.map(m => {
                  return (
                    <div key={m.id} className='news_item'>
                      <div className='news_item_left'></div>
                      <div className='news_item_right'>
                        <div className='news_title'>{m.username}</div>
                        <div className='news_introduce'>{m.position}</div>
                        <div className='news_details' style={{ wordBreak: 'normal', }}>
                          {m.introduce}
                        </div>
                        <div className='news_tabs'>
                        
                          {
                            m.tags?.map(tage_item => {
                              return (
                                <div key={tage_item} className='news_tabs_item'>{tage_item}</div>
                              )
                            })
                          }
                        </div>
                      </div>
                    </div>
                  )
                })
              }



            </div>
          </div>

          {/* 分页 */}
          <div className='pagination_content'>
            <div className='pagination_in'>
              <ConfigProvider locale={zh_CN}>
                <Pagination showQuickJumper showSizeChanger
                  defaultPageSize={data.pageSize}
                  current={pageNo}
                  defaultCurrent={pageNo} total={data.totalRecord}
                  onChange={this.paginationOnChange}
                  itemRender={this.itemRender} />
              </ConfigProvider>
            </div>
          </div>

          {/* 轮播图 */}
          <div className='slideshow_content'>
            <div className='slideshow_in'>
              <div className='instruct'>
                <div className='instruct_left' onClick={this.prev} >
                  <i className='iconfont icon-xiangyoujiantou'></i>
                </div>
                <div className='instruct_right' onClick={this.next}>
                  <i className='iconfont icon-xiangzuojiantou'></i>
                </div>
              </div>
              <div className='slideshow_title'>
                <div>讲师风采</div>
                <div>LECTURER DEMEANOR</div>
              </div>
              <div className='slideshow_footer'>
                {
                  img.length > 0 && <Carousel autoplay dots lazyLoad
                    afterChange={this.carouselOnChange}
                    ref={el => (this.slider = el)}>
                    {
                      img.map((img, index) => {
                        return (
                          <div className='div_img' key={index}>
                            <img className='carousel_img' src={img} />
                          </div>
                        )
                      })
                    }
                  </Carousel>
                }
              </div>
            </div>
          </div>
          
        </div>
        {/* ======================== */}
      </div>

      // </div>
    )
  }
}

